<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link type="favicon" rel="shortcut icon" href="./static/favicn.ico" rel="external nofollow" />
    <title>六沐集团</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <style>
    	*{
    		margin: 0px;
    		padding: 0px;
    	}
    	li{
    		list-style: none;
    	}
    	.box{
				position: relative;
				width: 100%;
				height: 200px;
				overflow: hidden;
				cursor: pointer;
			}
			.box:after{
				position: absolute;
				left: -100%;                    /*改变left的值，让其相对box影藏*/
				top: 0;
				width: 30%;
				height: 100%;
				content: "";
				/* Safari 5.1 - 6.0 */
				background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
				background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
				background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
				background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
				background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
			  /* Opera 11.1 - 12.0 */
	
			  /* Firefox 3.6 - 15 */
	
			  /* 标准的语法 */
	
		    	transform: skewX(-45deg);
			}
			.box:hover:after{
				left: 150%;
		    	transition: 1s ease;
			}
    </style>
  </body>
</html>
